import React from 'react'
import { Form, Input, Button, Toast } from 'antd-mobile'
import { useNavigate } from 'umi'
import { userReg } from '@/api';
import './style.scss'
import HomeHeader from "../home/components/HomeHeader";
export default function index() {
  const navigate = useNavigate();
  const userRegister = (params: {username:string, pwd:string}) => {
    userReg(params).then(res => {
      if(res.data.code === 0){
        Toast.show({
          content: '注册成功',
          afterClose: () => {
            // 去登录页
            navigate('/login', {replace: true})
          }
        })
      }
      
    })
    
  }
  return (
    <div>
      <HomeHeader className='reg-header'/>
      <Form 
        className='form-reg'
        onFinish={userRegister}
      >
        <Form.Item
          name="username"
          label="用户名"
          rules = {
            [
              {
                required: true,
                message: '用户名必填'
              },
              {
                pattern: /^[a-zA-Z]\w{3,11}$/,
                message: '用户名必须由4-12位英文数字下划线组成,必须字母开头'
              }
            ]
          }
        >
          <Input/>
        </Form.Item>
        <Form.Item
          name="pwd"
          label="密码"
        >
          <Input type="password"/>
        </Form.Item>
        <Form.Item>
          <Button type="submit" color='primary'>注册</Button>
          <Button type="reset" color='primary'>重置</Button>
        </Form.Item>
      </Form>
      <Button onClick={() => {
        navigate('/login')
      }}>跳转登陆</Button>
    </div>
  )
}
